// 1. 模拟房屋数据（调整字段名以匹配渲染格式）
var houses = [
  {
    id: 1,
     img:'./img/2.jpg',
        name:'户型方正， 朝南、采光视野无遮挡',
        house:'一室',
        area:35.11,
        direction:'朝南',
        flood:'低楼层',
        totalprice:19.5,
        unitprice:5554
  },
  {
    id: 2,
    img:'./img/1.jpg',
        name:'二环边  公园旁 标准三房 诚心出售 价位低',
        house:'二室',
        area:50,
        direction:'朝东',
        flood:'中楼层',
        totalprice:15,
        unitprice:3000
  },
  {
    id: 3,
    img:'./img/3.jpg',
   name:'小区中间位置 南北通透 稀有户型 满五年 精装修',
        house:'三室',
        area:89.14,
        direction:'朝南',
        flood:'高楼层',
        totalprice:132,
        unitprice:14809
  },
  {
    id: 4,
  img:'./img/4.jpg',
        name:'金沙湖边户南北小三房采光视野好',
        house:'一室',
        area:15.88,
        direction:'朝北',
        flood:'低楼层',
        totalprice:15.4,
        unitprice:9747
  },
  {
    id: 5,
     img:'./img/5.jpg',
   name:'一口价房源，23年交付  精装一天未住',
        house:'二室',
        area:75.39,
        direction:'朝西',
        flood:'中楼层',
        totalprice:70,
        unitprice:9286
  },
  {
    id: 6,
     img:'./img/5.jpg',
        name:'一口价房源，23年交付  精装一天未住',
        house:'三室',
        area:75.39,
        direction:'朝西',
        flood:'中楼层',
        totalprice:70,
        unitprice:9286
  }
];


var filterType = [];      
var filterDirection = []; 
var filterFloor = [];     
var currentSort = "default";  
var sortAsc = true;      



function gettext() {

  filterType = [];
  filterDirection = [];
  filterFloor = [];
  var checks = document.getElementsByClassName("check");
  for (var i = 0; i < checks.length; i++) {
    if (checks[i].checked) {
   
      var text = checks[i].nextElementSibling.innerHTML;
      
    
      var parentBox = checks[i].parentNode.parentNode.parentNode;
      var category = parentBox.getElementsByClassName("box1-left")[0].innerHTML;
      
     
      if (category === "房型") {
        filterType.push(text);
      } else if (category === "朝向") {
        filterDirection.push(text);
      } else if (category === "楼层") {
        filterFloor.push(text);
      }
    }
  }
  
  showHouses();
}



function change() {
  // 获取点击的元素
  var clickedLi = event.currentTarget;
  var sortText = clickedLi.innerHTML;
  
  // 更新选中状态
  var allLi = document.getElementsByClassName("title-list1");
  for (var i = 0; i < allLi.length; i++) {
    allLi[i].className = "title-list1";
  }
  clickedLi.className = "title-list1 selected";
  
  // 设置排序方式
  if (sortText === "默认排序") {
    currentSort = "default";
  } else if (sortText === "房屋总价") {
    if (currentSort === "totalprice") {
      sortAsc = !sortAsc;
    } else {
      currentSort = "totalprice";
      sortAsc = true;
    }
  } else if (sortText === "房屋单价") {
    if (currentSort === "unitprice") {
      sortAsc = !sortAsc;
    } else {
      currentSort = "unitprice";
      sortAsc = true;
    }
  } else if (sortText === "房屋面积") {
    if (currentSort === "area") {
      sortAsc = !sortAsc;
    } else {
      currentSort = "area";
      sortAsc = true;
    }
  }
  
  // 重新筛选显示
  showHouses();
}


// 5. 筛选并显示房屋
function showHouses() {
  // 1. 筛选房屋
  var filtered = [];
  for (var i = 0; i < houses.length; i++) {
    var house = houses[i];
    var include = true;
    
    // 筛选房型（从house字段提取，如"一室一厅"提取"一室"）
    if (filterType.length > 0) {
      var hasType = false;
      var houseType = house.house.substring(0, 2); // 取前两个字作为房型
      for (var t = 0; t < filterType.length; t++) {
        if (houseType === filterType[t]) {
          hasType = true;
          break;
        }
      }
      if (!hasType) include = false;
    }
    
    // 筛选朝向
    if (filterDirection.length > 0) {
      var hasDir = false;
      for (var d = 0; d < filterDirection.length; d++) {
        if (house.direction === filterDirection[d]) {
          hasDir = true;
          break;
        }
      }
      if (!hasDir) include = false;
    }
    
    // 筛选楼层
    if (filterFloor.length > 0) {
      var hasFloor = false;
      for (var f = 0; f < filterFloor.length; f++) {
        if (house.flood === filterFloor[f]) {
          hasFloor = true;
          break;
        }
      }
      if (!hasFloor) include = false;
    }
    
    if (include) {
      filtered.push(house);
    }
  }
  
  // 2. 排序房屋
  var sorted = sortHouses(filtered);
  
  // 3. 显示房屋
  renderHouses(sorted);
}


// 6. 排序房屋
function sortHouses(houseList) {
  // 复制数组
  var arr = [];
  for (var i = 0; i < houseList.length; i++) {
    arr[i] = houseList[i];
  }
  
  // 冒泡排序实现
  for (var i = 0; i < arr.length - 1; i++) {
    for (var j = 0; j < arr.length - 1 - i; j++) {
      var swap = false;
      
      if (currentSort === "default") {
        // 默认按ID排序
        if (arr[j].id > arr[j+1].id) {
          swap = true;
        }
      } else if (currentSort === "totalprice") {
        // 按总价排序
        if (sortAsc) {
          if (arr[j].totalprice > arr[j+1].totalprice) {
            swap = true;
          }
        } else {
          if (arr[j].totalprice < arr[j+1].totalprice) {
            swap = true;
          }
        }
      } else if (currentSort === "unitprice") {
        // 按单价排序
        if (sortAsc) {
          if (arr[j].unitprice > arr[j+1].unitprice) {
            swap = true;
          }
        } else {
          if (arr[j].unitprice < arr[j+1].unitprice) {
            swap = true;
          }
        }
      } else if (currentSort === "area") {
        // 按面积排序
        if (sortAsc) {
          if (arr[j].area > arr[j+1].area) {
            swap = true;
          }
        } else {
          if (arr[j].area < arr[j+1].area) {
            swap = true;
          }
        }
      }
      
      // 交换位置
      if (swap) {
        var temp = arr[j];
        arr[j] = arr[j+1];
        arr[j+1] = temp;
      }
    }
  }
  
  return arr;
}



function renderHouses(houseList) {
  var mainList = document.querySelector(".main-list");
  mainList.innerHTML = ""; 
  

  if (houseList.length === 0) {
    return;
  }
  

  houseList.forEach(function(item) {
    mainList.innerHTML += `
      <li class="list">
        <img class="img1" src="${item.img}" alt="${item.name}的房屋图片">  
        <div class="list-right">
          <div class="name">${item.name}</div>
          <div class="address">
              <p class="icon"></p>
              <p class="house">${item.house}</p>
              <p class="area"><span>${item.area}</span>平米</p>
              <p class="direction">${item.direction}</p>
              <p class="flood">${item.flood}</p>
          </div>
          <div class="priceInfo">
              <div class="totalprice">
                  <span class="big">${item.totalprice}</span>
                  万
              </div>
              <div class="unitprice">
                  <span>${item.unitprice}</span>
                  元/平
              </div>
          </div>
        </div>
      </li>
    `;
  });
}


window.onload = function() {
  showHouses();
};
